<template>
  <div id="app">
    <div class="app_normal window">
      <div style="width: 1200px;margin: 0px auto;">
        <el-container style=" border: 1px solid #eee">
          <el-header style="width: 1200px;height: 80px;font-size: 30px;
          background-color: #455a81;color: burlywood">
            <span>个人中心</span>
          </el-header>
          <el-header style="text-align: right;width: 1200px;height: 60px;
          background-color: #8fa1c7; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>何富韬</span>
          </el-header>
          <el-container>
            <el-row class="tac">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo">
                <el-col :span="30" style="width: 250px">
                  <el-aside width="250px" style="background-color: #B3C0D1">
                    <el-menu-item index="1">
                      <span slot="title">用户信息</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="goTo('/showshops')">
                      <span slot="title">商铺展示 </span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="goTo('/order-detail')">
                      <span slot="title">订单详情 </span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="goTo('')">
                      <span slot="title">待支付订单</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="goTo('')">
                      <span slot="title">已完成订单</span>
                    </el-menu-item>
                    <el-menu-item index="6" @click="goTo('')">
                      <span slot="title">我的收藏</span>
                    </el-menu-item>
                    <el-menu-item index="7" @click="goTo('')">
                      <span slot="title">消息</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                      <span slot="title"></span>
                    </el-menu-item>
                    <el-menu-item index="8">
                      <span slot="title"></span>
                    </el-menu-item>
                    <el-menu-item index="9">
                      <span slot="title"></span>
                    </el-menu-item>
                    <el-menu-item index="10">
                      <el-button @click=" ">点击此处返回首页</el-button>
                    </el-menu-item>
                  </el-aside>
                </el-col>
              </el-menu>
            </el-row>
            <el-main style="background-color: #d3dae9">
              <el-form ref="form" :model="form" label-width="100px">
                <!--action  请求后台接口 -->
                <el-upload
                  class="avatar-uploader"
                  action="/api/consumerUpload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-form-item label="姓名">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="form.radio">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="详细地址">
                  <el-input v-model="form.addr"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="即时配送">
                  <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="update" class="submit" round>修改</el-button>
                  <el-button type="primary" round>取消</el-button>
                </el-form-item>
              </el-form>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "User",
    data() {
      return {

        form: {
          name: '',
          tel: '',
          region: '',
          desc: '',
          radio: 2,
          addr: '',
          imageUrl: '',
        }
      }
    },
    methods: {

      goTo(path) {
        this.$router.replace(path);
      },

      update: function() {
        axios.post("/api/updateConsumer",this.user).then(res=>{
          if (res.data===1){
            this.$router.push("/user");
          }else {
            this.$message.error(res.data.message);
          }
        })
      },

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.form.imageUrl=res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #8fa1c7;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8fa1c7;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
